<script setup lang="ts">
import FormPanel from "@/common/components/FormPanel/FormPanel.vue"
import {
  get,
  getDynamicynamic,
  getFileUseBlobByPost,
  post
} from "@/utils/http"
import { ref } from "vue"
// 定义一个 DOM 引用
const props = defineProps({
  msg: {
    type: String,
    required: true
  }
})
const inputRef = ref<InstanceType<typeof FormPanel> | null>(null)
interface FormData {
  account: string | null
  password: string | null
  name: string | null
  sex: number | null // 0: 男, 1: 女
  hobby: number[] // 假设爱好存储为数字数组
  phone: string | null
  qq: string | null
  accountType: number | null
  email: string | null
  desc: string | null
  number: number | null
  status: number | null // 0: 停用, 1: 启用
}
const formOpts = ref<{
  ref: null | HTMLElement
  formData: FormData
  fieldList: any[] // 需要具体定义每个字段的类型
  operatorList: any[] // 同上
  listTypeInfo: {
    hobbyList: () => Promise<any[]> // 需要具体定义返回类型
    sexList: { key: string, value: number }[]
    accountTypeList: { [key: number]: string }
    statusList: { key: string, value: number }[]
  }
}>({
        ref: null,
        formData: {
          account: null, // *用户账号
          password: null, // *用户密码
          name: null, // *用户昵称
          sex: null, // *性别: 0:男 1:女
          hobby: [], // *爱好: 0:男 1:女
          phone: null, // 手机号码
          qq: null, // qq
          accountType: null, // *用户类型: 0: 手机注册 1: 论坛注册 2: 管理平台添加
          email: null, // 邮箱
          desc: null, // 描述
          number: null, // 计算器
          status: null // *状态: 0：停用，1：启用(默认为1)',
        },
        fieldList: [
          {
            label: "账号",
            value: "account",
            type: "input",
            comp: "el-input",
            prepend: "测试",
            formItemBind: { labelWidth: "400px" },
            rules: [{ required: true, message: "请输入账号", trigger: "blur" }]
          },
          { label: "密码", value: "password", type: "password", comp: "el-input" },
          {
            label: "昵称",
            value: "name",
            type: "input",
            comp: "el-input",
            isTrim: true
          },
          {
            label: "性别",
            value: "sex",
            type: "select-arr",
            comp: "el-select",
            list: "sexList",
            bind: { disabled: false },
            arrLabel: "key",
            arrKey: "value"
          },
          {
            label: "平台用户",
            value: "accountType",
            type: "select-obj",
            comp: "el-select",
            list: "accountTypeList"
          },
          {
            label: "状态",
            value: "status",
            type: "select-arr",
            list: "statusList",
            comp: "el-select",
            arrLabel: "key",
            arrKey: "value"
          },
          {
            label: "爱好",
            value: "hobby",
            type: "checkbox",
            comp: "el-checkbox-group",
            list: "hobbyList",
            event: "checkbox"
          },
          {
            label: "手机号码",
            value: "phone",
            type: "input",
            comp: "el-input",
            bind: { maxlength: 11 }
          },
          { label: "QQ", value: "qq", type: "input", comp: "el-input" },
          { label: "邮箱", value: "email", type: "input", comp: "el-input" },
          {
            label: "计数器",
            value: "number",
            type: "inputNumber",
            bind: { controls: false, min: 2, max: 99 },
            comp: "el-input-number"
          },
          {
            label: "描述",
            value: "desc",
            type: "textarea",
            comp: "el-input",
            widthSize: 1
          }
        ],
        operatorList: [
          // { label: '提交', type: 'danger', fun: this.submitForm },
          // { label: '重置', type: 'primary', fun: this.resetForm },
        ],
        // 相关列表
        listTypeInfo: {
          hobbyList: () => {
            return new Promise((resolve, reject) => {
              get<any[]>("/api/getHobbs").then((res) => {
                resolve(res.list)
              })
            })
          },
          // hobbyList: [
          //   { label: '吉他', value: '0' },
          //   { label: '看书', value: '1' },
          //   { label: '美剧', value: '2' },
          //   { label: '旅游', value: '3' },
          //   { label: '音乐', value: '4' },
          // ],
          sexList: [
            { key: "女", value: 1 },
            { key: "男", value: 0 }
          ],
          accountTypeList: {
            0: "手机用户",
            1: "论坛用户",
            2: "平台用户"
          },
          statusList: [
            { key: "启用", value: 1 },
            { key: "停用", value: 0 }
          ]
        }
      })
function handleEvent() {}
// 提交form表单
function submitForm() {
  inputRef.value?.validate((valid) => {
    if (!valid) return
    console.log("最终数据", formOpts.value.formData)
  })
}
async function getFormInfo() {
  const res = await get<any>("/api/getForm")
}
getFormInfo()

// const getHobbsList = async () => {
//   const res = await get('/api/getHobbs')
//   console.log('getHobbsList', res)
// }
// getHobbsList()
</script>

<template>
  <div class="greetings">
    <FormPanel
      v-model="formOpts.ref"
      :form-opts="formOpts"
      :width-size="2"
      @handle-event="handleEvent"
      ref="inputRef"
    />
    <el-button type="primary" @click="submitForm">
      确 定
    </el-button>
  </div>
</template>

<style scoped>
h1 {
  font-weight: 500;
  font-size: 2.6rem;
  position: relative;
  top: -10px;
}

h3 {
  font-size: 1.2rem;
}

.greetings h1,
.greetings h3 {
  text-align: center;
}

@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}
</style>
